<template>
    <div class="modles">
        <!-- 标题 -->
        <div class="title">{{ datas.title }}</div>
        <!-- 数据统计 -->
        <div class="num-data">
            <!-- 设备数 -->
            <div class="equipment">
                <div class="equipment-num">设备数</div>
                <span class="num">10</span>
            </div>
            <!-- 在线数 -->
            <div class="on-line">
                <div class="on-line-num">在线数</div>
                <span class="num">10</span>
            </div>
            <!-- 离线数 -->
            <div class="off-line">
                <div class="off-line-num">离线数</div>
                <span class="num">10</span>
            </div>
        </div>
        <!-- 柱状图 -->
        <div ref="energyEchart" style="width: 100%;height:300px;"></div>
        <div ref="monthly" style="width: 100%;height:300px;"></div>
    </div>

</template>

<script>
export default {
    props: {
        titles: {
            typeof: String,
        },
        datas: {
            typeof: Array,
        }
    },
    data() {
        return {

        }
    },
    mounted() {
        this.energy();
        this.monthly();
    },

    methods: {
        //柱状图
        energy() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.energyEchart);
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '耗能排行',
                    textStyle: {
                        fontSize: 14,
                        color: '#ccc'
                    }
                },
                color: ['#c23531', '#2f4554', '#61a0a8',],
                xAxis: {
                    type: 'value',
                },
                yAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                series: [
                    {
                        data: this.datas.energy,
                        type: 'bar',
                        barCategoryGap: '40%',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265'];
                                    return colorList[params.dataIndex]
                                },
                                barBorderRadius: [0,20,20,0],
                                 color: {
                                    type: 'linear',
                                    x: 1,  //右
                                    y: 0,  //下
                                    x2: 0,  //左
                                    y2: 0,  //上
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'pink' // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.7,
                                            color: '#2378f7' // 70% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#83bff6' // 100% 处的颜色
                                        }
                                    ]
                                }
                            }
                        }
                    }
                ]
            });
        },
        // 线性图
        monthly() {
            // 基于准备好的dom，初始化echarts实例
            let monthly = this.$echarts.init(this.$refs.monthly);
            // 绘制图表
            monthly.setOption({
                title: {
                    text: '每月数据',
                    textStyle: {
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email'],
                    borderColor: 'red',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'line',
                        stack: 'Total',
                        data: this.datas.month,
                        smooth:true,
                        symbol:'none',
                         itemStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 1,  //右
                                    y: 0,  //下
                                    x2: 0,  //左
                                    y2: 0,  //上
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'pink' // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.7,
                                            color: '#2378f7' // 70% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgb(128, 128, 128)' // 100% 处的颜色
                                        }
                                    ],
                                }
                            },
                        },
                    }
                ]
            });
        },

    }
}
</script>

<style lang="scss" scoped>
.modles {
    width: 100%;
    height: 300px;
    display: flex;
    .title {
        width: 300px;
        height: 300px;
        text-align: center;
        margin-top: 150px;
    }

    .num-data {
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .equipment {
            width: 90%;
            height: 30%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            border: 3px solid #f60;
            border-radius: 10px;
            font-size: 22px;
            font-family:'Times New Roman', Times, serif;
            font-weight: 700;
            box-shadow: 2px 2px 9px 3px rgb(131, 164, 54) ;
             
        }
        .on-line {
            width: 90%;
            height: 30%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 3px solid #f60;
            border-radius: 10px;
        }
        .off-line {
            width: 90%;
            height: 30%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 3px solid #f60;
            border-radius: 10px;
        }
    }
}
</style>